<template>
  <div class="page-container">
    <!--总标题【开始】-->

    <!--操作栏【开始】-->
    <el-row class="page-optbutton">
      <el-button size="mini" type="primary" plain @click="add(null,0)">添加模块</el-button>
    </el-row>
    <!--操作栏【结束】-->



    <tree-table :data="list" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>

      <el-table-column label="图标" align="center" min-width="60" >
        <template slot-scope="scope"><svg-icon  :icon-class="scope.row.icon" /></template>
      </el-table-column>

      <el-table-column label="主键ID" align="center"   min-width="120" >
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>

      <el-table-column label="标题" align="center"   min-width="100" >
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>

      <el-table-column label="名称" align="center"   min-width="80" >
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>


      <el-table-column label="类型" align="center" min-width="80" >
        <template slot-scope="scope">{{scope.row.type|menuTypeFilter}}</template>
      </el-table-column>

      <el-table-column label="隐藏" align="center" min-width="50" >
        <template slot-scope="scope">{{ scope.row.hidden | hiddenFilter }}</template>
      </el-table-column>


      <el-table-column label="vue路径" align="center" min-width="150" >
        <template slot-scope="scope">{{ scope.row.component }}</template>
      </el-table-column>

      <el-table-column label="排序" align="center" min-width="60" >
        <template slot-scope="scope">{{ scope.row.sortOrder }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini"   type="success" plain  @click="add(scope.row)" >添加</el-button>
          <el-button size="mini"   type="primary" plain  @click="edit(scope.row)" >编辑</el-button>
          <el-button size="mini"   type="danger" plain  @click="del(scope.row)" >删除</el-button>
        </template>

      </el-table-column>

    </tree-table>

    <el-dialog v-dialogDrag :title="dialogTitle"  v-if="sysMenuDialogVisible"
                :visible.sync="sysMenuDialogVisible"
                :closeOnClickModal="false"  width="1300px" >
      <sysMenuDialog :dataObj="selObj" :extendObj="extendObj" class="page-dialogTabDiv" v-if="sysMenuDialogVisible" ref="sysMenuDialogRef" @closeDialog="closeDialog"></sysMenuDialog>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="$refs.sysMenuDialogRef.save()" >保存</el-button>
        <el-button @click="sysMenuDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>



<script>
  import treeTable from '@/components/TreeTable'
  import treeToArray from "@/utils/customEval";


  import {sysMenuTreeList,deleteSysMenu} from "@/api/system/sysMenu.js"

  import sysMenuDialog from '@/views/system/dialog/sysMenuDialog.vue';

  export default {
    /**  =过滤器=  **/
    filters: {
      menuTypeFilter(value){
        if(value==1){
          return '模块'
        }else if(value==2){
          return '功能'
        }else if(value==3){
          return '按钮'
        }
      },
      hiddenFilter(value){
        if(value==1){
          return '是'
        }else{
          return '否'
        }
      }
    },
    components: {
      treeTable,
      sysMenuDialog,
    },
    /**  =变量=  **/
    data(){
      return {
        typeList: [{name:'模块',value:1}, {name:'功能',value:2},{name:'按钮',value:3}],
        formLabelWidth:'130px',//表单宽度
        form:{},//表单
        list:[],//定义列表
        listLoading:true,//加载状态
        editDialogTitle:'添加',
        editDialogVisible:false,
        editMode:0,
        closeOnClickModal:false,//点击模态框不关闭窗口

        svg:false,
        menuTreeList:[],
        func: treeToArray,
        args: [null, null,null, null,null, null,null,],
        expandAll:false,

        selObj:new Object(),
        dialogTitle:'编辑',
        sysMenuDialogVisible:false,
        extendObj:new Object(),
        pIdArr:[],
      }
    },
    /**  =方法=  **/
    methods: {

      /**获取列表数据**/
      getTableList(){
        sysMenuTreeList(this.params).then(response => {
          this.list=response.data;//给表格的list赋值，这里的list要跟上面表格定义的一致:data="list"
          this.listLoading=false;//关闭列表加载提示
          this.menuTreeList = response.data;
          this.extendObj.menuTreeList = this.menuTreeList;
        });
      },


      /**添加**/
      add(row){
        this.selObj = {};
        this.pIdArr = [];
        if(row){
          this.setPIdArr(row);
          this.extendObj.pIdArr = this.pIdArr;
        }
        this.dialogTitle="添加菜单";
        this.sysMenuDialogVisible=true;
      },

      /**编辑**/
      edit(row){
        this.selObj = {};
        this.pIdArr = [];
        if(row.parentId != 0){
          this.setPIdArr(row.parent);
        }
        this.extendObj.pIdArr = this.pIdArr;

        this.dialogTitle="修改菜单";
        this.selObj=Object.assign({},row);
        this.sysMenuDialogVisible=true;
      },
      /**删除**/
      del(row){
        var typetext = "";
        if(row.type==1){
          typetext="模块";
        }else if(row.type==2){
          typetext="功能";
        }else{
          typetext="按钮";
        }
        var wtext ="";
        if(row.type==1){
          wtext="注意：模块下的功能和按钮将会跟着删除";
        }else if(row.type==2){
          wtext="注意：功能下的按钮将会跟着删除";
        }

        this.$confirm('是否删除'+typetext+'['+row.name+']？'+wtext, '删除', {//内容,标题
          confirmButtonText: '是',//确定按钮文字
          cancelButtonText: '否',//取消按钮文字
          type: 'warning'
        }).then(() => {
          deleteSysMenu({ids:""+row.id}).then(response => {
            this.afterSave(response);
         });

      }).catch(() => {
          //点击取消按钮执行
        });
      },


      /**保存之后**/
      afterSave(response){
        if(response.data.success){//成功
          this.$notify({
            title: '操作成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        }else{//失败
          this.$notify({
            title: '操作失败',
            message: '操作失败',
            type: 'danger',
            duration: 2000
          })
        }
        //重新加载数据
        this.getTableList();
        //关闭对话框
        this.editDialogVisible=false;
      },

      closeDialog(reload){
        if(reload==1){
          this.getTableList();
        }
        this.sysMenuDialogVisible=false;
      },

      setPIdArr(row){
        if(row.parent){
          this.pIdArr.push(row.id)
          this.setPIdArr(row.parent)
        }else{
          this.pIdArr.push(row.id)
        }
      },

    },
    /**  =初始化=  **/
    created(){
      this.getTableList();
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .page {
    &-container {
      margin: 30px;

      &-title{
        margin-left: 30px;
      }
      &-form_box{border: 1px solid #dcdfe6; max-width: 1200px; margin: 0 auto 20px auto;
        .title{border-bottom: 1px solid #dcdfe6; padding: 10px 20px; line-height: 24px; color: #42b983; font-size: 17px; margin-bottom: 20px;}
        .form{padding: 0 20px;}
        .el-input{max-width: 350px;}
        .el-select,.el-date-editor.el-input{width: 100%;max-width: 350px;}
        .b_bor{border-bottom: 1px solid #dcdfe6; margin-bottom: 20px;}
      }
      &-more_link{text-align: right;padding: 20px; padding-top: 0;max-width: 1200px;margin: 0 auto;}
      &-sub_bnts{text-align: center;padding: 20px; padding-top: 0;}
      .expanded .el-table__expanded-cell{
        padding: 0px 0px;
      }
      .el-table__expanded-cell[class*=cell] {
        padding: 0px 0px;
      }
    }

  }

</style>

<style rel="stylesheet/scss" lang="css" >
  .expanded .el-table__expanded-cell{
    padding: 0px 0px;
  }
  .el-table__expanded-cell[class*=cell] {
    padding: 0px 0px;
  }
</style>
